<template>
	<view>
		<u-navbar back-text="返回" title="订单列表"></u-navbar>
		<!-- tab -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
		<!-- 订单容器 -->
		<view class="order-container">
			<!-- 每天订单 -->
			<view class="day-orders-container" v-for="(day, index) in 2" :key="index">
				<text class="date-title">5月3日</text>
				<!-- 内容 -->
				<u-card v-for="order in orders" :key="order.id" class="order-card" :head-border-bottom="false"
					:show-head="false" @click="detailOrder(order.id)" box-shadow="0 4px 8px rgba(0, 0, 0, 0.2);">
					<view slot="body">
						<view class="order-top">
							<text class="order-time">{{ order.date }}</text>
							<text class="order-status">{{ order.pickupLocation }}</text>
						</view>
						<view class="order-content">
							<view class="order-location">
								<view class="origin-location">
									<!-- <text class="label">出发地：</text> -->
									<image class="icon" src="../../static/images/departure-place.png" />
									<text class="order-details">Drop-off: {{ order.dropoffLocation }}</text>
								</view>
								<view class="target-location">
									<!-- <text class="label">目的地：</text> -->
									<image class="icon" src="../../static/images/destination-place.png" />
									<text class="order-details">Fare: ${{ order.fare }}</text>
								</view>
							</view>
							<view class="order-state">
								<text v-if="order.state">
									20.2元
								</text>
								<text v-else>
									取消
								</text>
							</view>
						</view>

					</view>
				</u-card>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部订单'
				}, {
					name: '已取消'
				}, {
					name: '未付款',
					count: 5
				}, {
					name: '已完成'
				}],
				current: 0,
				orders: [{
						id: 1,
						pickupLocation: '123 Main St',
						dropoffLocation: '456 Elm St',
						fare: 15.00,
						state: true,
						date: new Date()
					},
					{
						id: 2,
						pickupLocation: '789 Maple Ave',
						dropoffLocation: '101 Pine St',
						fare: 22.50,
						state: false,
						date: new Date()
					},
					// Add more orders here
				]
			}
		},
		methods: {
			changeTab(index) {
				this.current = index;
			},
			detailOrder(orderId) {
				uni.navigateTo({
					url: '/pages/driver/order_detail'
				});
			}
		}
	}
</script>

<style>
	.order-container {
		padding: 10px;
		background-color: #e9eef0;
	}


	.day-orders-container {
		margin-bottom: 10px;
		border-radius: 8px;
		padding: 10px;
	}

	.date-title {
		font-size: 18px;
		/* 设置字体大小 */
		font-weight: bold;
		/* 加粗字体 */
		color: #333333;
		/* 设置字体颜色 */
		margin-bottom: 10px;
		/* 添加下边距 */
	}

	.order-card {
		margin-bottom: 10px;

	}

	.order-time,
	.order-status {
		font-size: 14px;
	}

	/* 如果需要额外的样式 */
	.order-time {
		color: #333;
		/* 你可以根据需要调整颜色 */
	}

	.order-status {
		color: #ff4626;
		/* 你可以根据需要调整颜色 */
	}

	.order-details {
		display: block;
		margin-top: 5px;
	}

	.action-buttons {
		text-align: right;
	}

	.order-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* 可选：对齐项目的垂直中心 */

	}

	.order-content {
		display: flex;
		justify-content: space-between;
		/* Ensures content is spaced evenly */
		align-items: center;
		/* Aligns items vertically centered */
		padding: 10px;
	}

	.order-location,
	.order-state {
		display: flex;
		flex-direction: column;
	}

	.order-details {
		font-size: 14px;
		color: #666;
	}

	.order-state {
		font-size: 14px;
		color: #007BFF;
	}

	.origin-location,
	.target-location {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.origin-location text,
	.target-location text {
		margin-right: 5px;
	}

	.label {
		font-weight: bold;
	}

	.icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}
</style>